<template>
    <div class="systemsetting-wrap">
        <div class="panel-search-top">
            <div class="form">
                <el-form ref="form" :inline="true" label-width="0px" size="mini">
                    <el-form-item>
                        <el-input placeholder="请输入查询内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="button-group-operate">
                <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button>
                <el-button icon="el-icon-editor" @click="handleAdd(1)">编辑</el-button>
                <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
            </div>
        </div>

        <div class="pagecontent">
            <div class="panel">
                <div class="panel-con">
                    <el-table :data="json.portraitC1">
                        <el-table-column prop="c1" label="菜单名称"></el-table-column>
                        <el-table-column prop="c2" label="菜单代码"></el-table-column>
                        <el-table-column prop="c3" label="菜单类型"></el-table-column>
                        <el-table-column prop="c1" label="上级菜单"></el-table-column>
                        <el-table-column prop="c2" label="访问点名称"></el-table-column>
                        <el-table-column prop="c2" label="访问点代码"></el-table-column>
                        <el-table-column prop="c2" label="访问点URL"></el-table-column>
                        <el-table-column prop="c4" label="操作">
                            <template slot-scope="scope">
                                <a class="table-edit"  @click="handleAdd(1)"></a>
                                 <a class="table-delete" @click="dialogDelete=true" href="#"></a>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="compage">
                        <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="`${dialogAddTitle}`" width="650px" :visible.sync="dialogAdd">
            <el-form ref="form" label-width="230px" label-position="right" size="mini">
                <el-form-item label="菜单名称">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="菜单代码">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-select placeholder="请选择">
                        <el-option label="选择1" value="1"></el-option>
                        <el-option label="选择2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上级菜单">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="访问点名称">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="访问点代码">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="访问点URL">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item class="buttonlist">
                    <el-button type="primary">确定</el-button>
                    <el-button @click="dialogAdd = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
<el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
         是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
</template>
<script>
import Data from "../data/index";

export default {
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      dialogAdd: false,dialogAddTitle:'创建',dialogDelete:false,dialogSave:false,
      dialogInport: false,
      dialogExport: false,
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {},
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    handleAdd(type)  {
      this.dialogAdd = true;if(type==1){this.dialogAddTitle="编辑";}
    }
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
</style>

